<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>vue</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>

<body>

    <div id='app'>
        <!-- 子组件无法操作父组件的状态 isShow，局部变量的变化，不影响全局变量 -->
        <!-- 方案：子组件通知父组件，让父组件来操作状态 -->

        <!-- 3. 自定义绑定事件(子组件触发)--加微信 -->
        <navbar @myevent="handleEvent"></navbar>
        <sidebar v-show="isShow"></sidebar>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    // 导航栏
    Vue.component('navbar', {
        template: `
        <div style="background-color: red;">
            <button @click="handleSend">资源管理器</button>--导航栏
        </div>
        `,
        methods: {
            // 2. 子组件绑定事件
            handleSend() {
                console.log('子组件');
                // $emit(函数名)固定写法
                // 4. 触发父组件函数
                // 只能传递一个参数， （传多个参数使用对象，数组）
                this.$emit('myevent', 132)
            }
        }
    });

    Vue.component('sidebar', {
        template: `
        <div style="background-color: yellowgreen;">
            <ul>
                <li>day01</li>
                    <li>day02</li>
                    <li>day03</li>
                    <li>day04</li>
                </ul>
        </div>
        `,
    })

    let vm = new Vue({
        el: '#app',
        data: {
            isShow: true,
        },
        methods: {
            // 1.父组件定义函数
            handleEvent(data) {
                console.log('父组件');
                this.isShow = !this.isShow;
                console.log('收到的参数' + data);
            }
        }
    });

    /* 

    父子通信步骤 ：
    
      1. 父组件定义函数
      2. 子组件绑定事件
      3. 自定义绑定事件(子组件触发)
      4. 触发父组件函数( $.emit(函数名) )
    
    */
</script>

</html>